<style lang="less" scoped>
  .reperfusion-measure{
    width: 100%;
    height: 100%;
    &_title{
      height: 40px;
      background: url('~@/images/contenttitle.png');
      background-repeat: no-repeat;
      background-position: bottom;
      text-align: center;
      color: #00F6FF;
      line-height: 40px;
      margin-bottom: 5px;
    }
    &_content{
      height: calc(100% - 45px);
    }
    .content-box{
        height: 50%;
        color: #fff;
        .content-top{
          display: flex;
          justify-content: space-evenly;
        }
        .content-num{
          font-size: 30px;
          text-decoration: underline;
        }
        .content-name{
          text-align: center;
        }
      }
  }
</style>

<template>
  <div class="reperfusion-measure">
    <div class="reperfusion-measure_title">
      <span>{{ reperTitle }}</span>
    </div>
    <div v-if="isStrock == 'chestPain'" class="reperfusion-measure_content">
      <div id="reperfusionMeasure" style="width: 100%; height: 100%;" />
    </div>
    <div v-if="isStrock == 'stroke'" class="reperfusion-measure_content">
      <el-col v-for="(item, index) in reperList" :key="index" :span="12" style="height: 50%;">
        <div class="content-box">
          <div class="content-top">
            <span class="content-num">{{ item.diagnosisSurgeryNum }}</span>
          </div>
          <div class="content-name">{{ item.diagnosisSurgeryName }}</div>
        </div>
      </el-col>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { getNumCABG, getStrokeDiagSurgeryNum } from '@/api/comprehensive/reperfusionMeasure'
export default {
  props: {
    isStrock: {
      type: String,
      default: 'chestPain'
    }
  },
  data() {
    return {
      reperTitle: '再灌注措施',
      reperList: [],
      setInter: null
    }
  },
  watch: {
    'isStrock'() {
      this.$nextTick(() => {
        this.init()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
    this.setInter = setInterval(() => {
      this.init()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.setInter)
  },
  methods: {
    init() {
      if (this.isStrock == 'chestPain') {
        this.reperTitle = '再灌注措施'
        let myChart = echarts.init(document.getElementById('reperfusionMeasure'))
        // myChart.clear()
        myChart.showLoading({
          text: '',
          fontSize: 18,
          left: 'center',
          color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
          textColor: '#fff', // 文字颜色
          maskColor: 'rgba(255, 255, 255, 0)' // 背景色
        })
        window.addEventListener('resize', myChart.resize)
        getNumCABG({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            let GradeNum = 0
            if (res.data) {
              GradeNum = res.data
              let option = {
                grid: {
                  top: 0,
                  bottom: 0,
                  left: 0,
                  right: 0
                },
                series: [
                  {
                    type: 'gauge',
                    center: ['50%', '50%'],
                    radius: '100%',
                    axisLine: {
                      lineStyle: {
                        width: 15,
                        color: [
                          [1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                            offset: 0.1,
                            color: '#008CFF'
                          }, {
                            offset: 0.8,
                            color: '#1CD1A1'
                          }])]
                        ]
                      }
                    },
                    pointer: {
                      itemStyle: {
                        color: '#fff'
                      }
                    },
                    splitLine: {
                      distance: -30,
                      length: 15,
                      lineStyle: {
                        color: '#0009F0',
                        width: 4
                      }
                    },
                    axisTick: {
                      show: false,
                      distance: 30,
                      length: 25,
                      lineStyle: {
                        color: '#3A9FFF',
                        width: 1
                      }
                    },
                    axisLabel: {
                      color: '#fff',
                      distance: 10,
                      fontSize: 12
                    },
                    detail: {
                      valueAnimation: true,
                      lineHeight: 40,
                      width: 10,
                      overflow: 'break',
                      formatter: '{value}例',
                      color: '#fff'
                    },
                    data: [{
                      value: GradeNum
                    }]
                  }
                ]
              }
              myChart.setOption(option)
            } else {
              myChart.showLoading({
                text: '暂无数据',
                fontSize: 18,
                left: 'center',
                color: 'transparent', // loading颜色，设置成透明或白色，不然会显示loading状态
                textColor: '#fff', // 文字颜色
                maskColor: 'rgba(255, 255, 255, 0)' // 背景色
              })
            }
          }
        })
      } else if (this.isStrock == 'stroke') {
        this.reperTitle = '不同诊断类型的手术例数'
        getStrokeDiagSurgeryNum({
          hospitalId: this.$store.getters.hospitalId
        }).then(res => {
          if (res.code == 0) {
            if (res.data && res.data.length > 0) {
              this.reperList = res.data
            }
          }
        })
      }
    }
  }
}
</script>
